<template>
      <div id="bar">
            <div class="item" v-for="(item, index) in listData" :key="index">
                  <div class="icon">{{ item.icon }}</div>
                  <div class="num">{{ item.num }}</div>
                  <div class="txt">{{ item.txt }}</div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        listData: [
                              {
                                    icon: "减少",
                                    num: "20%",
                                    txt: "人力成本"
                              },
                              {
                                    icon: "做到",
                                    num: "30%",
                                    txt: "客户体验"
                              },
                              {
                                    icon: "缩短",
                                    num: "40%",
                                    txt: "排队时间"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#bar {
      width: 1440px;
      margin: 20px auto;
      display: flex;
            justify-content: space-around;
      .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            .icon {
                  font-size: 8px;
                  width: 50px;
                  
                  text-align: center;
                  border: 1px solid #2B40CC;
                  color: #2B40CC;
                  border-radius: 20px;
                  padding: 3px;
            }
            .num {
                  font-size: 36px;
                  margin: 10px 0;
            }
            .txt {
                  font-size: 10px;
            }
      }
}
</style>